<template>
  <div class="centralIncome clearfix">
    <div class="logoBg">
      <img src="~@/assets/images/common/fiveG.png" />
    </div>
    <div class="heading">
      收入分析：
      <span class="redTitle">{{subAreaName}}码号核心平台收入{{accMonth}}月份环比情况</span>
    </div>
    <div class="content">
      <div class="leftContent">
        <div class="title">{{firstAreaName}}码号核心平台收入{{accMonth}}月份环比(万元)</div>
        <div class="tableBox">
          <el-table stripe style="width: 100%" class="tableTh28" ref="table" :data="tableData">
            <el-table-column
              v-for="(item,index) in colList"
              :label="item.firstAreaName"
              prop="areaName"
              min-width="75"
              :key="index"
            ></el-table-column>
            <template v-for="(item,index) in colList">
              <el-table-column :label="item.firstAreaName">
                <el-table-column label="环比量" prop="ringSpecificWeight" min-width="60">
                  <template slot-scope="scope">
                    <span
                      v-if="scope.row.ringSpecificWeight>0"
                      style="color:#5585bf"
                    >{{scope.row.ringSpecificWeight}}</span>
                    <span v-else style="color: #c00000">{{scope.row.ringSpecificWeight}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="环比增长率" prop="ringSpecificWeightRate" min-width="75"></el-table-column>
              </el-table-column>
              <el-table-column :label="item.subAreaName+'环比统计'" v-if="lvl<4">
                <el-table-column label="提升" prop="increaseNum" min-width="60">
                  <template slot-scope="scope">
                    <span style="color:#5585bf">{{scope.row.increaseNum}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="下降" prop="decreaseNum" min-width="60">
                  <template slot-scope="scope">
                    <span style="color: #c00000;font-weight: 700;">{{scope.row.decreaseNum}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="合计" prop="total" min-width="60"></el-table-column>
                <el-table-column label="提升占比" prop="increaseRate" min-width="70"></el-table-column>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
      <div class="rightDiv">
        <div class="rightCenter" v-if="lvl<4">
          <div class="title">TOP10{{subAreaName}}</div>
          <div class="topRight clearfix">
            <div class="desc">
              <span>前</span>
            </div>
            <ul class="topTen">
              <li class="clearfix" v-for="(item,index) in topData" :key="index" v-if="index<5">
                <span>{{item.topTen}}</span>
                <span>{{item.parentName}}</span>
                <span>{{item.areaName}}</span>
                <span>{{item.ringSpecificWeightRate}}</span>
              </li>
            </ul>
            <ul class="topTen">
              <li class="clearfix" v-for="(item,index) in topData" :key="index" v-if="index>=5">
                <span>{{item.topTen}}</span>
                <span>{{item.parentName}}</span>
                <span>{{item.areaName}}</span>
                <span>{{item.ringSpecificWeightRate}}</span>
              </li>
            </ul>
          </div>
          <div class="bottomRight clearfix">
            <div class="desc">
              <span>后</span>
            </div>
            <ul class="topTen">
              <li class="clearfix" v-for="(item,index) in bottomData" :key="index" v-if="index<5">
                <span>{{item.topTen}}</span>
                <span>{{item.parentName}}</span>
                <span>{{item.areaName}}</span>
                <span>{{item.ringSpecificWeightRate}}</span>
              </li>
            </ul>
            <ul class="topTen">
              <li class="clearfix" v-for="(item,index) in bottomData" :key="index" v-if="index>=5">
                <span>{{item.topTen}}</span>
                <span>{{item.parentName}}</span>
                <span>{{item.areaName}}</span>
                <span>{{item.ringSpecificWeightRate}}</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="rightCenter" v-if="lvl<4" style="display: none;">
          <div class="title blueColorFont">连续两个月环比正增长率的{{subAreaName}}</div>
          <div class="tableBox">
            <el-table
              stripe
              style="width: 100%"
              class="tableTh28"
              ref="table1"
              :data="continuousGrowthList"
              :cell-class-name="rowClass"
            >
              <el-table-column label="地市" prop="parentAreaName" min-width="75">
                <template slot-scope="scope">
                  <span style="color:#5585bf">{{scope.row.parentAreaName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="县分" prop="areaName" min-width="60">
                <template slot-scope="scope">
                  <span style="color:#5585bf">{{scope.row.areaName}}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="preTwoMonth+'月份环比'"
                prop="preTwoMonthRingSpecificWeightRate"
                min-width="75"
              >
                <template slot-scope="scope">
                  <span
                    style="color:#5585bf"
                    v-if="scope.row.preTwoMonthRingSpecificWeightRate>0"
                  >{{scope.row.preTwoMonthRingSpecificWeightRate+'%'}}</span>
                  <span
                    style="color:#c00000"
                    v-if="scope.row.preTwoMonthRingSpecificWeightRate<0"
                  >{{scope.row.preTwoMonthRingSpecificWeightRate+'%'}}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="preOneMonth+'月份环比'"
                prop="preOneMonthRingSpecificWeightRate"
                min-width="60"
              >
                <template slot-scope="scope">
                  <span
                    style="color:#5585bf"
                    v-if="scope.row.preOneMonthRingSpecificWeightRate>0"
                  >{{scope.row.preOneMonthRingSpecificWeightRate+'%'}}</span>
                  <span
                    style="color:#c00000"
                    v-if="scope.row.preOneMonthRingSpecificWeightRate<0"
                  >{{scope.row.preOneMonthRingSpecificWeightRate+'%'}}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="currentMonth+'月份环比'"
                prop="currentMonthRingSpecificWeightRate"
                min-width="60"
              >
                <template slot-scope="scope">
                  <span
                    style="color:#5585bf"
                    v-if="scope.row.currentMonthRingSpecificWeightRate>0"
                  >{{scope.row.currentMonthRingSpecificWeightRate+'%'}}</span>
                  <span
                    style="color:#c00000"
                    v-if="scope.row.currentMonthRingSpecificWeightRate<0"
                  >{{scope.row.currentMonthRingSpecificWeightRate+'%'}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
export default {
  name: "centralIncome",
  props: ["areaId", "month"],
  data() {
    return {
      accMonth: "",
      tableData: [],
      position: [],
      topTen: [
        "TOP1",
        "TOP2",
        "TOP3",
        "TOP4",
        "TOP5",
        "TOP6",
        "TOP7",
        "TOP8",
        "TOP9",
        "TOP10",
      ],
      bottomTen: [
        "TOP1",
        "TOP2",
        "TOP3",
        "TOP4",
        "TOP5",
        "TOP6",
        "TOP7",
        "TOP8",
        "TOP9",
        "TOP10",
      ],
      areaName: [],
      parentName: [],
      ringSpecificWeightRate: [],
      topData: [],
      bottomData: [],
      firstAreaName: [],
      subAreaName: "",
      lvl: "",
      colList: [],
      tableData1: [],
      continuousGrowthList: [],
      preOneMonth: "",
      preTwoMonth: "",
      currentMonth: "",
    };
  },
  methods: {
    rowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0 || rowIndex == 1) {
        return "rgb196";
      } else {
        return "bacColor00";
      }
    },
    getTrendDataByBranch() {
      $budgetAPI.getTrendDataByBranch(
        { areaId: this.areaId, accMonth: this.month },
        (res) => {
          if (res && res.code == 0) this.colList = [];
          this.accMonth = this.moment(res.content.accMonth).format("M");
          this.firstAreaName = res.content.areaName;
          this.subAreaName = res.content.subAreaName;
          this.lvl = res.content.lvl;
          this.tableData = res.content.leftTableData;
          let obj = {
            firstAreaName: this.firstAreaName,
            subAreaName: this.subAreaName,
          };
          this.colList.push(obj);
          res.content.topList.map((item, index) => {
            item["topTen"] = this.topTen[index];
          });
          // this.topData.push(obj)
          this.topData = res.content.topList;
          res.content.lastList.map((item, index) => {
            item["topTen"] = this.bottomTen[index];
          });
          this.bottomData = res.content.lastList;
          // 连续两个月环比增长
          this.continuousGrowthList = res.content.continuousGrowthList;
          this.preOneMonth = res.content.preOneMonth;
          this.preTwoMonth = res.content.preTwoMonth;
          this.currentMonth = res.content.currentMonth;
          this.$nextTick(() => {
            this.$refs.table1 && this.$refs.table1.doLayout();
            this.$refs.table2 && this.$refs.table2.doLayout();
          });
      
        },
        (err) => {}
      );
    },
  },
};
</script>

<style  lang="scss" scoped>
.centralIncome {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  position: relative;
  .centralIncome.clearfix:after,
  .centralIncome.clearfix:before {
    content: "";
    display: table;
  }
  .centralIncome.clearfix:after {
    clear: both;
  }
  .centralIncome.clearfix {
    *zoom: 1;
  }
  .logoBg {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .heading {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;
    .redTitle {
      color: #c00000;
    }
  }
  .content {
    display: flex;
    flex-direction: row;
    .leftContent {
      flex: 1;
      margin-right: 15px;
      position: relative;
      &:before {
        content: "";
        position: absolute;
        height: 100%;
        border: 1px dashed rgb(85, 133, 191);
        right: -15px;
      }
      .title {
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        // margin-bottom: 10px;
      }
      .tableBox {
        border-top: 1px solid #c00000;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        border-bottom: 1px solid #c00000;
        /deep/ .el-table th {
          background-color: transparent !important;
          border-right: 1px solid #c00000 !important;
          border-bottom: 1px solid transparent !important;
        }
        /deep/ .el-table th:nth-child(3) {
          border-right: 1px solid transparent !important;
        }
        /deep/ .el-table .is-group tr:first-child th:first-child {
          border-bottom: 1px solid #c00000 !important;
        }
        /deep/ .el-table .is-group tr:nth-child(2) th {
          border-bottom: 1px solid #c00000 !important;
          border-right: 1px solid transparent !important;
        }
        /deep/ .el-table .is-group tr:nth-child(2) th:nth-child(2) {
          border-right: 1px solid #c00000 !important;
        }
        /deep/ .el-table tr td {
          border-bottom: 1px solid transparent !important;
          border-right: 1px solid transparent !important;
        }
        /deep/ .el-table tr td:nth-child(1),
        /deep/ .el-table tr td:nth-child(3) {
          border-right: 1px solid #c00000 !important;
        }
        /deep/ .el-table tr:last-child td {
          color: #333;
          text-align: center;
          border-bottom: 1px solid transparent !important;
          border-top: 1px solid #c00000 !important;
          background-color: rgb(255, 255, 204);
        }
        /deep/ .el-table tr td:first-child {
          border-left: 1px solid transparent !important;
        }
        /deep/ .el-table--border,
        .el-table--group {
          border: none;
        }
      }
    }
    .rightDiv {
      flex: 1;
      display: flex;
      flex-direction: column;
      .rightCenter {
        // flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        position: relative;

        &:first-child {
          margin-bottom: 10px;
        }
        .title {
          text-align: center;
          font-size: 16px;
          font-weight: 700;
          &.blueColorFont {
            color: rgb(85, 133, 191);
            font-weight: 700;
          }
        }
        .tableBox {
          border-top: 1px solid #5585bf;
          border-left: 1px solid transparent !important;
          border-right: 1px solid transparent !important;
          border-bottom: 1px solid #5585bf;
          /deep/ .el-table th {
            background-color: transparent !important;
            border-right: 1px solid transparent !important;
            border-bottom: 1px solid #5585bf !important;
          }
          /deep/ .el-table tr td {
            &.rgb196 {
              font-weight: 700;
            }
            &.bacColor317eb0 {
              font-weight: normal;
            }
          }
          /deep/ .el-table td {
            padding: 0 !important;
          }
          /deep/ .el-table .is-group tr:nth-child(2) th {
            // border-bottom: 1px solid #c00000 !important;
            border-right: 1px solid transparent !important;
          }
          // /deep/  .el-table .is-group tr:nth-child(2) th:nth-child(2){
          //      border-right: 1px solid #c00000 !important;
          // }
          /deep/ .el-table tr td {
            border-bottom: 1px solid transparent !important;
            border-right: 1px solid transparent !important;
          }
          /deep/ .el-table tr td:nth-child(1),
          /deep/ .el-table tr td:nth-child(3) {
            border-right: 1px solid transparent !important;
          }
          /deep/ .el-table tr:last-child td {
            color: #333;
            text-align: center;
            border-bottom: 1px solid transparent !important;
            border-top: 1px solid transparent !important;
          }
          /deep/ .el-table tr td:first-child {
            border-left: 1px solid transparent !important;
          }
          /deep/ .el-table--border,
          .el-table--group {
            border: none;
          }
        }
        .topRight,
        .bottomRight {
          // flex: 1;
          // display: flex;
        }
        .topRight {
          margin-bottom: 10px;
          .desc {
            width: 8%;
            display: block;
            // flex: 0.8;
            float: left;
            text-align: center;
            position: relative;
            border-top: 2px solid rgb(85, 133, 191);
            border-bottom: 2px solid rgb(85, 133, 191);
            height: 235px;
            span {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, 50%);
            }
          }
          .topTen {
            position: relative;
            display: block;
            float: left;
            width: 45%;
            // flex: 4;
            // display: flex;
            // flex-direction: column;
            li {
              line-height: 24px;
              height: percentage(0.5/5);
              // flex: 1;
              span {
                width: percentage(0.9/4);
                display: block;
                float: left;
                text-align: center;
                height: 100%;
                height: 47px;
                line-height: 47px;
              }
              span:nth-child(2),
              span:nth-child(3) {
                color: rgb(85, 133, 191);
              }
            }
            li:nth-child(1) span:nth-child(1) {
              border-top: 2px solid rgb(85, 133, 191);
            }
            li:last-child span:nth-child(1) {
              border-bottom: 2px solid rgb(85, 133, 191);
            }
            li:nth-child(1) span:nth-child(n + 1) {
              border-top: 2px solid rgb(85, 133, 191);
            }
            li:last-child span:nth-child(n + 1) {
              border-bottom: 2px solid rgb(85, 133, 191);
            }
          }
        }

        .bottomRight {
          .desc {
            width: 8%;
            display: block;
            float: left;
            // flex: 0.8;
            text-align: center;
            position: relative;
            border-top: 2px solid #c00000;
            border-bottom: 2px solid #c00000;
            height: 235px;
            span {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, 50%);
            }
          }
          .topTen {
            position: relative;
            display: block;
            float: left;
            width: 45%;
            // flex: 4;
            // display: flex;
            // flex-direction: column;
            li {
              line-height: 24px;
              height: percentage(0.5/5);
              // flex: 1;
              span {
                width: percentage(0.9/4);
                display: block;
                text-align: center;
                height: 47px;
                line-height: 47px;
                float: left;
              }
              span:nth-child(n + 2) {
                color: #c00000;
              }
              span:nth-child(2),
              span:nth-child(3) {
                font-weight: 700;
              }
            }
            li:nth-child(1) span:nth-child(1) {
              border-top: 2px solid #c00000;
            }
            li:last-child span:nth-child(1) {
              border-bottom: 2px solid #c00000;
            }
            li:nth-child(1) span:nth-child(n + 1) {
              border-top: 2px solid #c00000;
            }
            li:last-child span:nth-child(n + 1) {
              border-bottom: 2px solid #c00000;
            }
          }
        }
      }
    }
  }
}
</style>
